<script setup lang="ts">
// 判断图片是否进入可视区域
// 1：拿到图片的dom
// 进入可视区域后才开始加载img
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import { onBeforeRouteLeave } from 'vue-router'

const target = ref<null | HTMLImageElement>(null)
/*
const {stop}=useIntersectionObserver(需要监听是否进入可视区域的dom,([{isIntersecting}])=>{
    isIntersecting:true进入可视区域
})
stop:是否停止监听  
*/
const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], b) => {
    if (isIntersecting) {
      console.log('进入可视区域')
      target.value!.src =
        'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
      stop()
    }
  },
  {
    threshold: 0.5 // 0-1的值，判断是否进入可视区域的百分比
  }
)
/*
自定义指令vue2
    v-指令名:属性名.修饰符="值"
  局部自定义指令
     directives:{
      指令名:{
        生命周期
        bind:绑定时 
        inserted:渲染后
        update:更新时，不保证更新完成
        componentUpdated:更新完成时，包括子组件也更新完成
        unbind:销毁
        bind(dom,obj,vnode){
           dom:指令所在dom  
           obj: 属性名，修饰符，值（value）,指令名
           vnode:指令所在dom节点信息，内部 context是指令所在组件的实例对象
        }
      }
     }
vue3:
  v-指令名:属性名.修饰符="值"
    指令名:{
        生命周期
        created:创建后，
        beforeMount:渲染前 
        mounted:渲染后
        beforeUpdate:更新前
        updated:更新完成时，包括子组件也更新完成
        beforeUnmount:销毁前
        unmounted:销毁后
        mounted(dom,obj,vnode){
           dom:指令所在dom  
           obj: 属性名，修饰符，值（value）,指令名
               指令所在组件的实例对象
                 instance:实例                
           vnode:指令所在dom节点信息
        }
      }

*/
onBeforeRouteLeave((to, from) => {
  console.log('onBeforeRouteLeave')
})
// const arr = ref(['首页', '居家', '其它'])
</script>
<template>
  <!-- <XtxBread :list="arr"></XtxBread> -->
  <br />
  <XtxBread separator=">">
    <XtxBreadItem to="/">
      <span style="color:red">
        首页
      </span>
    </XtxBreadItem>
    <XtxBreadItem>活动管理</XtxBreadItem>
    <XtxBreadItem to="/">活动管理2</XtxBreadItem>
  </XtxBread>
  <br />

  <div class="play-ground" v-test:abc.xxx="'我是自定义指令的值'"></div>
  <img ref="target" alt="" />
  <!-- src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" -->
</template>
<style lang="less" scoped>
.play-ground {
  height: 3000px;
}
</style>
